<!DOCTYPE html>
<html>
<head>
    <title>Floating Label Form</title>
    <link type="text/css" rel="stylesheet" href="css/floatingLabelForm.css">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script>
        /*
         Inspirated by http://codepen.io/aaronbarker/pen/tIprm (Aaron Barker)
         */

        // it's really crappy but i'm too lazy to optimize it  (ノಠ益ಠ)ノ

        $(function(){
            var inputs = "input[type='text'], input[type='password'], input[type='email'], textarea";
            var onClass = "on";
            var showClass = "show";

            $(inputs).each(function(){
                var placeholder = $(this).attr("placeholder");
                <!-- /*$(this).before("<label>"+placeholder+"</label>");*/ -->
                $(this).attr("onfocus", "this.placeholder = ''");
                $(this).attr("onblur", "this.placeholder = '"+placeholder+"'");
            });

            $(inputs).bind("checkval",function(){
                var label = $(this).prev("label");
                if(this.value !== ""){
                    label.addClass(showClass);
                }
            }).on("keyup",function(){
                        $(this).trigger("checkval");
                    }).on("focus",function(){
                        var label = $(this).prev("label");
                        label.addClass(showClass);
                        label.addClass(onClass);
                        $(this).trigger("checkval");
                    }).on("blur",function(){
                        var label = $(this).prev("label");
                        label.removeClass(showClass);
                        label.removeClass(onClass);
                        $(this).trigger("checkval");
                    });

            $("input + label + input").on("focus", function(){
                $(this).prev().prev().css("border-right-color", "#4481C4");
            }).on("blur", function(){
                        $(this).prev().prev().css("border-right-color", "#aaa");
                    });

        });
    </script>
</head>
<body>
<div class="box">
    <form method="post" target="#">
        <div class="field-wrapper">
            <label>Subject</label>
            <input class="large" type="text" placeholder="Subject">
        </div>
        <div class="field-wrapper">
            <label>Email</label>
            <input type="text" placeholder="Email"><!--
            -->
            <label>Phone (optional)</label><input type="email" placeholder="Phone (optional)">
        </div>
        <div class="field-wrapper">
            <label>Content</label>
            <textarea class="large" placeholder="Content"></textarea>
        </div>
        <input type="submit" value="Submit" onclick="alert('It\'s a fake form dummy 。(⌒∇⌒。)');return false;" />
    </form>
</div>

<div id="description">
    <h1><span class="s1">Float</span> <span class="s2">Label</span> <span class="s3">Pattern</span></h1>
    <h2>Try to fill it ( ͡° ͜ʖ ͡°) =></h2>
</div>
</body>
</html>